import React, { useEffect, useState } from 'react'
import instance from '../../request/axios';
import './index.css'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router';
import { InfiniteScroll, List } from 'antd-mobile'

function index() {
    const [data, setData] = useState<any>([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(0)
    useEffect(() => {
        instance.get('/api/nosocomium',{
            params: {
                currentPage,
                pageSize,
            }
        }).then((res) => {
            console.log(res);
            setData(res.data.data);
            setTotal(res.data.total);
        })
    }, [])
    const nav = useNavigate()
    const back = () => {
        nav(-1);
    }
    const [hasMore, setHasMore] = useState(true)
    async function loadMore() {
       setCurrentPage(currentPage + 1);
       const res = await instance.get("/api/nosocomium", {
            params: {
                pageSize,
                currentPage,
            },
        });
        console.log(res);
        const { code} = res.data
        if (code === 200) {
            //修改页码+1
            setCurrentPage(currentPage +1)
            //合并数据
            setData(data.concat(res.data.data));
            //判断是否还有更多数据
            if (res.data.currentPage * res.data.pageSize >= res.data.total) {
                setHasMore(false); // 没有更多数据了
            }
        } else {
            setHasMore(false); // 没有更多数据了
        }
    }
    return (

        <div className='boxsned'>
            <div className='header'>
                <NavBar onBack={back}>推荐医院</NavBar>
            </div>
            <div className='main'>
                <List>
                    {
                        data && data.map((item: any, index: number) => {
                            return <List.Item key={index}>
                                <div className='mainBox' >
                                    <div className='mainBoxLeft'>
                                        <img src="../../../public/ad0dfdd75853c1320b76c761d710cc5f.png" alt="" />
                                    </div>
                                    <div className='mainBoxRight'>
                                        <p>
                                            {item.name}
                                        </p>
                                        <p>
                                            {item.gradeDesc}
                                            {item.categoryDesc}

                                        </p>
                                        <p>
                                            {item.goodVoteCnt}患者推荐
                                        </p>
                                    </div>
                                </div>
                            </List.Item>
                        })
                    }
                </List>
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
        </div>
    )
}

export default index